<template>
    <view class="tab ">
        <view class="item " :class="{ active: active == item.value }" @tap="active = item.value"
            v-for=" item, idx in tabList" :key="item.value">
            <view class="before"></view>
            <view class="content">
                {{ item.label }}
            </view>
            <view class="after"></view>
        </view>
    </view>
</template>
<script lang="ts" setup>
import { computed, ref, watch } from 'vue';
let props = withDefaults(defineProps<{
    list?: Array<{
        label: string,
        value: any
    }>,
    modelValue: string | number
}>(), {
    list: () => [],
    modelValue: 0
})
let active = ref(props.modelValue);
let emit = defineEmits<{ (e: 'update:modelValue', value: string | number): void }>()
watch(() => active.value, () => {
    emit('update:modelValue', active.value)
})
let tabList = computed(() => {
    if (typeof props.list[0] == 'string' || typeof props.list[0] == 'number') {
        return props.list.map((item: any, idx: number) => ({ label: item, value: idx }))
    } else {
        return props.list
    }
})
</script>
<style lang="scss">
l-tab {
    @apply block;
}
</style>
<style scoped lang="scss">
.tab {
    $a: #86c2ff;
    @apply overflow-hidden rounded-t-xl flex relative border-b;
    border-color: $a;

    .item {
        @apply flex-1 text-center p-2 flex justify-center max-w-[50%];

        &.active {

            @apply relative rounded-t-xl;
            background-color: $a;

            .after,
            .before {
                @apply w-2.5 top-3 bottom-0 absolute bg-inherit;
                transform-origin: bottom center;

                &::before {
                    content: '';
                    @apply block absolute bottom-0 w-3 h-3;
                    background: repeating-radial-gradient(circle at var(--pos), transparent 0, transparent 0.75rem, $a 0.75rem, $a 100%);
                }
            }

            .before {
                @apply right-full skew-x-[-20deg];
                --pos: top left;
                transform: skewX(-20deg);

                &::before {
                    @apply right-full;
                }
            }

            .after {
                @apply left-full skew-x-[20deg];
                --pos: top right;

                &::before {
                    @apply left-full;
                }
            }

            .content {
                @apply relative text-base font-bold;

                // &::after {
                //     content: '';
                //     @apply block absolute rounded top-full left-0 right-0 h-1 bg-white;
                //     // bg-gradient-to-br from-primary-light to-primary-dark
                // }
            }



        }
    }
}
</style>